<template>
  <div class="cardWrap">
    <div class="card" :id="item.id" v-for="(item, index) in cardList" :key="index">
      <div class="card-header">
        <div class="card-left">
          <div class="title">{{ item.title }}</div>
          <div class="text">
            <span v-html="item.content"></span>
          </div>
        </div>
        <div class="card-right" v-if="item.type !== 'radio'">
          <el-switch v-model="form[item.name]" class="ml-2" size="small" />
        </div>
      </div>
      <div class="card-footer" v-if="item.type == 'input' && form[item.name]">
        <el-divider />
        <!-- <slot></slot> -->
        <el-form-item :prop="item.Option.inputName">
          <template #label>
            <span>
              {{ item.Option.label }}
              <span class="label-tip" v-if="item.Option.labelTip">{{ item.Option.labelTip }}</span></span
            >
          </template>
          <el-input v-model.number="form[item.Option.inputName]" placeholder="请输入" style="width: 200px">
            <template #append v-if="item.Option.unit">{{ item.Option.unit }}</template>
          </el-input>
        </el-form-item>
      </div>
      <div class="card-footer" v-if="item.type == 'radio'">
        <el-divider />
        <!-- <slot></slot> -->

        <el-radio-group v-model="form[item.Option.radioName]" class="ml-4">
          <el-radio v-for="(it, index) in item.Option.options" :key="index" :label="it.value">{{ it.label }}</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'AdminMain',
  components: {},
  props: {
    // 标题
    // title: {
    //   type: String,
    //   require: true
    // },
    // // 内容
    // text: {
    //   type: String,
    //   require: true,
    // },
    className: {
      type: String
    },
    cardList: {
      // 自定义表单的列表
      type: Array,
      default: () => []
    },

    form: {
      // 自定义表单绑定的form
      type: Object,
      default: () => ({})
    }
  },
  // ----------------生命周期-----------------------
  setup() {
    return {}
  }
})
</script>

<style lang="stylus" scoped>
.cardWrap
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  // width: 868px;
  // height: 675px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  box-sizing border-box
  .card
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
    padding: 16px;
    width: 100%;
    border: 1px solid var(--mc-gray4-color);
    border-radius: 4px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    .card-header
      display: flex
      justify-content: space-between
    .title
      font-family: 'PingFang SC';
      font-size 14px
      margin-bottom 8px
      line-height: 20px;
      font-weight: 500;
    .text
      font-family: 'PingFang SC';
      font-size 12px
      line-height: 18px;
      letter-spacing: 0.001em;
      color: rgba(0, 0, 0, 0.6);
    .label-tip
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0.001em;
      color: rgba(0, 0, 0, 0.38);
    .card-right
      align-items: center;
      display: flex;
      padding-left 40px
    .el-divider--horizontal
      margin 16px 0
</style>
